function OpenStreetMap() {
    this.map = null;
    this.zoom = 18;
    this.markers = null;
    // var layer = null;
    this.arrPointMarker = [];
    this.currentPopup = null;
    this.popupClass = null;
    this.sizeIconMarker = null;
    // save current map view
    this.currentZoom = null;
    this.currentPointMapCenter = null;
    this.isSaveMapView = false;
    this.divContainer = null;
    
};
OpenStreetMap.prototype.changeArrPointMarker = function (lon ,lat){
        this.arrPointMarker.splice(0,1);
        var positionMarker = [] || "";
        positionMarker.push(lon);
        positionMarker.push(lat);
        this.arrPointMarker.push(positionMarker);
    
};
OpenStreetMap.prototype.initMap = function(container,lon,lat) {
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
    this.popupClass = new OpenLayers.Class(OpenLayers.Popup.Anchored, {
          "autoSize": true,
          "minSize": new OpenLayers.Size(360, 150),
          "maxSize": new OpenLayers.Size(460, 200),
          "keepInMap": true
    });
    this.sizeIconMarker = new OpenLayers.Size(33,33);
    this.divContainer = container;
    this.map = new OpenLayers.Map({
        div: container,
        theme: null,
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: 'm',
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(
            -20037508.34, -20037508.34, 20037508.34, 20037508.34
        ),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar()
        ],
        layers: [
            new OpenLayers.Layer.Google("Google ", { 
                sphericalMercator: true,
                projection:"EPSG:900913",
                transparent: true })
        ],
        center: position,
        zoom : this.zoom
    });
};

OpenStreetMap.prototype.clearContainer =  function(){
   if(this.divContainer != null){
       var divContainMap = $("div[id='"+this.divContainer+"']");
       divContainMap.html('');
   }
};

OpenStreetMap.prototype.setMapCenter =  function(lon,lat){
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
    this.map.setCenter(position, 17);
};

OpenStreetMap.prototype.setMapCenterPoints = function() {
    var lngLatMinMax = this.getLatitudeLongitudeMinMax();
    var latitude = lngLatMinMax.latitude;
    var longitude = lngLatMinMax.longitude;
    
//    var lngMin = parseFloat(this.getLngMin());
//    var lngMax = parseFloat(this.getLngMax());
//    var latMin = parseFloat(this.getLatMin());
//    var latMax = parseFloat(this.getLatMax());
    
    var lngMin = parseFloat(longitude.min);
    var lngMax = parseFloat(longitude.max);
    var latMin = parseFloat(latitude.min);
    var latMax = parseFloat(latitude.max);
    
    var centerPoint = this.caculateCenterPoint(latMin,lngMin,
            latMax,lngMax,this.arrPointMarker.length);
    this.map.setCenter(centerPoint, this.zoom);
};

OpenStreetMap.prototype.changeIconMarker = function(param) {
    var marker = null;
    if(this.markers != null){
        for(var i = 0 ; i < this.markers.markers.length ; i++){
            if(this.markers.markers[i].deviceId == param.deviceId){
                //keep old marker
                marker = this.markers.markers[i];
                //remove marker from array markers from object map
                this.markers.removeMarker(this.markers.markers[i]);
            }
        }
    }
    if(marker != null){
        //create new icon object
        var offset = new OpenLayers.Pixel(-(this.sizeIconMarker.w), -(this.sizeIconMarker.h));
        var icon = new OpenLayers.Icon(param.imgUrl,this.sizeIconMarker,offset);
        //keep old feature object from marker do you want
        //change icon
        var feature = marker.feature;
        if(param.popupContentHTML !== undefined){
            feature.data.popupContentHTML = param.popupContentHTML;
            if(feature.popup != null){
                feature.popup.destroy();
                feature.popup = null;
            }
        }
        // set again new icon and feature object of marker do you want change
        var lonLatIcon;
        if(param.lon != undefined && param.lat != undefined){
            lonLatIcon = new OpenLayers.LonLat(param.lon,param.lat).transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    this.map.getProjectionObject() // to Spherical Mercator Projection
            );
        }else{
            lonLatIcon = marker.lonlat;
        }
        feature.lonlat = lonLatIcon;
        var newMarker = new OpenLayers.Marker(lonLatIcon, icon.clone());
        
        newMarker.feature = feature;
        newMarker.deviceId = marker.deviceId;
        //newMarker = this.registerPopupMouseOutOver(feature,newMarker);
        
        //register again click handle of old marker 
        //to new merker
        newMarker = this.registerPopupMouseClick(feature, newMarker);
        
        this.markers.addMarker(newMarker);
    } 
};

OpenStreetMap.prototype.setMarkerPopup = function(paramMarkerPopup) {
    if(this.map !== null){
        if(this.markers === null){
            this.markers = new OpenLayers.Layer.Markers( "Markers" );
            this.map.addLayer(this.markers);
        }

        var positionMarker = [] || "";
        positionMarker.push(paramMarkerPopup.lon);
        positionMarker.push(paramMarkerPopup.lat);
        this.arrPointMarker.push(positionMarker);
        
        var lonLatMarker = new OpenLayers.LonLat(paramMarkerPopup.lon, paramMarkerPopup.lat)
            .transform(new OpenLayers.Projection("EPSG:4326"), 
            this.map.getProjectionObject());
        var feature = new OpenLayers.Feature(this.markers, lonLatMarker); 
        feature.closeBox = paramMarkerPopup.closeBox;
        feature.popupClass = this.popupClass;
        feature.data.popupContentHTML = paramMarkerPopup.popupContentHTML;
        feature.data.overflow = (paramMarkerPopup.overflow) ? "auto" : "hidden";
        
        
        var offset = new OpenLayers.Pixel(-(this.sizeIconMarker.w), -(this.sizeIconMarker.h));
        var icon = new OpenLayers.Icon(paramMarkerPopup.imgUrl,this.sizeIconMarker,offset);
        var lonLatIcon = new OpenLayers.LonLat(paramMarkerPopup.lon,paramMarkerPopup.lat).transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                this.map.getProjectionObject() // to Spherical Mercator Projection
        );
        var marker = new OpenLayers.Marker(lonLatIcon, icon.clone());
        marker.feature = feature;
            
       // marker = this.registerPopupMouseOutOver(feature, marker);
        marker = this.registerPopupMouseClick(feature, marker);
        //marker.events.register("click", feature,paramMarkerPopup.mapEventClickMarkerhandle);
        marker.deviceId = paramMarkerPopup.deviceId;
        marker.deviceHost = paramMarkerPopup.deviceHost;
//      marker.siteId = paramMarkerPopup.siteId;
        
        this.markers.addMarker(marker);
    }
};
OpenStreetMap.prototype.drawCirlceAroundMarker = function(param){
    var lonLat;
    if(param.lon != undefined && param.lat != undefined  
            && param.radius != undefined){
        lonLat = param.lonlat;
        if(this.cirlceLayer == null || this.cirlceLayer == undefined ){
            this.cirlceLayer = new OpenLayers.Layer.Vector('cirlceLayer', {
                styleMap: new OpenLayers.StyleMap({
                  "default": new OpenLayers.Style({
//                    pointRadius: "${radius}",
                    pointRadius: "${getSize}",
//                    fillColor: '#bdc1c4',
                    fillColor: '#ff00ff',
                    fillOpacity: 1,
//                    strokeColor: '#ed9576',
                    strokeColor: '#00cc00',
                    strokeWidth: 1,
                    strokeOpacity: 1
                  },
                  { context: {
                      getSize: function(feature) {
                          return 5 / feature.layer.map.getResolution();
                      }}  
                  })
                })
              });
//            this.cirlceLayerRed = new OpenLayers.Layer.Vector('cirlceLayerRed', {
//                styleMap: new OpenLayers.StyleMap({
//                  "default": new OpenLayers.Style({
////                    pointRadius: "${radius}",
//                    pointRadius: "${getSize}",
//                    fillColor: '#bdc1c4',
//                    fillOpacity: 0.2,
//                    strokeColor: '#00cc00',
//                    strokeWidth: 1,
//                    strokeOpacity: 0.2
//                  },
//                  { context: {
//                      getSize: function(feature) {
//                          return 5 / feature.layer.map.getResolution();
//                      }}  
//                  })
//                })
//              });
////            this.map.addPlayer(this.cirlceLayer);
//            this.map.addLayers([this.cirlceLayerRed]);
            this.map.addLayers([this.cirlceLayer]);
        }
        if(param.lon != undefined && param.lat != undefined){
            lonLat = new OpenLayers.LonLat(param.lon,param.lat).transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    this.map.getProjectionObject() // to Spherical Mercator Projection
            );
        }
        if(parseFloat(param.lon) != 0 && parseFloat(param.lat) != 0){
            var feature = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat),
                    {
                      radius : param.radius
                    }
             );
             this.cirlceLayer.addFeatures([feature]);
        }
//        map.zoomToMaxExtent(vectorLayer.getDataExtent());
    }
};
OpenStreetMap.prototype.registerPopupMouseClick = function(feature,marker) {
    var seltParent = this;
    marker.events.register("click", feature,function(evt){
        var selt = this;
        if (this.popup === null) {
            this.popup = this.createPopup(this.closeBox);
            seltParent.map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
//        for(var i = 0 ; i < seltParent.markers.markers.length ; i++){
//            var marker = seltParent.markers.markers[i];
//            if(seltParent.marker.feature.id == selt.id){
//                var deviceId = marker.deviceId;
//                console.log(deviceId);
//                router.currentView.currentView.maps.initRealtimeData(deviceId);
//            }
//        }
       
        // start for handle click of icon close popup marker 
   
        if(selt.popup != null){
            var currentPopupId = selt.popup.id;
            // for case 1 :show popup is clicked to top viewer
//            $('#' + currentPopupId).click(function(){
//                $('#' + currentPopupId).css("z-index",999);
//                for(var i = 0 ; i < map.popups.length ; i++){
//                    if( currentPopupId != map.popups[i].id){
//                        $('#' + map.popups[i].id).css("z-index",998);
//                    }
//                }
//            });
            // for case 2 : show popup is clicked
            for(var i = 0 ; i < seltParent.map.popups.length ; i++){
                if( currentPopupId != seltParent.map.popups[i].id){
                    var popupId = seltParent.map.popups[i].id;
                    seltParent.map.removePopup(seltParent.map.popups[i]);
                    for(var i = 0 ; i < seltParent.markers.markers.length ; i++){
                        var fature = seltParent.markers.markers[i].feature;
                        if(fature.popup !== null){
                            if(fature.popup.id === popupId){
                                fature.popup.destroy();
                                fature.popup = null;
                            }
                        }
                    }
                }
            }
            $('#' + currentPopupId).find(".close-icon-popup-map").click(function(){
                for(var i = 0 ; i < seltParent.map.popups.length ; i++){
                    if( currentPopupId == seltParent.map.popups[i].id){
                        //remove from list popups of map object
                        seltParent.map.removePopup(selt.popup);
                        //destroy popup from feature object
                        selt.popup.destroy();
                        selt.popup = null;
                    }
                }
            });
        }
        // end for handle click of icon close popup marker 
        seltParent.currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    });
    return marker;
};

OpenStreetMap.prototype.caculateCenterPoint = function(_minLat, _minLng, _maxLat, _maxLng, _markerCount) {
    // --- set zoom level
    if(_markerCount == 1){
        zoomLevel = 14;
    }
    else{
        var latDistance = Math.abs(_maxLat - _minLat);
        var lngDistance = Math.abs(_maxLng - _minLng);
        var markerDistance = Math.sqrt(Math.pow(latDistance,2) + Math.pow(lngDistance,2));
        //--------------------------------
        if(markerDistance >= 180){
            this.zoom = 1;
        }
        else if(markerDistance >= 150){
            this.zoom = 1.5;
        }
        else if(markerDistance >= 125){
            this.zoom = 2;
        }
        else if(markerDistance >= 22.5){
            this.zoom = 2.5;
//            zoom = 1.5;
        }
        else if(markerDistance >= 11.25){
           // zoom = 3;
            this.zoom = 5;
        }
        else if(markerDistance >= 5.625){
            //zoom = 3.5;
            this.zoom = 5.5;
        }
        else if(markerDistance >= 2.813){
            //zoom = 4;
            this.zoom = 6.5;
        }
        else if(markerDistance >= 1.406){
            //zoom = 5;
            this.zoom = 7.5;
        }
        else if(markerDistance >= 0.703){
            //zoom = 6;
            this.zoom = 8.5;
        }
        else if(markerDistance >= 0.301){
            //zoom = 6.5;
            this.zoom = 10;
        }
        //------------------------------
        else if(markerDistance >= 0.150){
            this.zoom = 12;
        }
        else if(markerDistance >= 0.075){
            this.zoom = 11;
        }
        else if(markerDistance >= 0.037){
            this.zoom = 13;
        }
        else if(markerDistance >= 0.015){
            this.zoom = 13.5;
        }
        else if(markerDistance >= 0.0025){
            this.zoom = 14;
        }
        //--------------------------------
    }
     
    // --- calculate center point location
    var centerLat = 0;
    var difLatFlg = ((_minLat*_maxLat) > 0 ? 1 : -1);
    if(difLatFlg > 0){
        centerLat = (_minLat + _maxLat)/2;
    }
    else{
        centerLat = (Math.abs(_minLat) + Math.abs(_maxLat))/2 + _minLat;
    }
     
    var centerLng = 0;
    var difLngFlg = (_minLng*_maxLng > 0 ? 1 : -1);
    if(difLngFlg > 0){
        centerLng = (_minLng + _maxLng)/2;
    }
    else{
        centerLng = (Math.abs(_minLng) + Math.abs(_maxLng))/2 + _minLng;
    }
     
    var centerPoint = new OpenLayers.LonLat(centerLng, centerLat)
        .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            this.map.getProjectionObject() // to Spherical Mercator Projection
        );
    return centerPoint;
};

OpenStreetMap.prototype.getLatitudeLongitudeMinMax = function(){
    var result = '' || {};
    var latitude = '' || {};
    latitude['min'] = this.arrPointMarker[0][1];
    latitude['max'] = this.arrPointMarker[0][1];
    var longitude = '' || {};
    longitude['min'] = this.arrPointMarker[0][0];
    longitude['max'] = this.arrPointMarker[0][0];
    for(var i=0 ;i<this.arrPointMarker.length;i++){
        if(parseFloat(this.arrPointMarker[i][0]) < parseFloat(longitude.min)){
            longitude.min = this.arrPointMarker[i][0]; // longitude min
        }
        if(parseFloat(this.arrPointMarker[i][0]) > parseFloat(longitude.max)){
            longitude.max = this.arrPointMarker[i][0]; // longitude max
        }
        if(parseFloat(this.arrPointMarker[i][1]) < parseFloat(latitude.min)){
            latitude.min = this.arrPointMarker[i][1]; // latitude min
        }
        if(parseFloat(this.arrPointMarker[i][1]) > parseFloat(latitude.max)){
            latitude.max = this.arrPointMarker[i][1]; // latitude max
        }
    }
    result['latitude'] = latitude;
    result['longitude'] = longitude;
    return result;
};
OpenStreetMap.prototype.getLngMin = function(){
    var temp = this.arrPointMarker[0][0];
    for(var i=0 ;i<this.arrPointMarker.length;i++){
        if(parseFloat(this.arrPointMarker[i][0]) < parseFloat(temp)){
            temp = this.arrPointMarker[i][0];
        }
    }
    return temp;
};

OpenStreetMap.prototype.getLngMax = function(){
    var temp = this.arrPointMarker[0][0];
    for(var i=0 ;i<this.arrPointMarker.length;i++){
        if(parseFloat(this.arrPointMarker[i][0]) > parseFloat(temp)){
            temp = this.arrPointMarker[i][0];
        }
    }
    return temp;
};

OpenStreetMap.prototype.getLatMin = function(){
    var temp = this.arrPointMarker[0][1];
    for(var i=0 ;i<this.arrPointMarker.length;i++){
        if(parseFloat(this.arrPointMarker[i][1]) < parseFloat(temp)){
            temp = this.arrPointMarker[i][1];
        }
    }
    return temp;
};

OpenStreetMap.prototype.getLatMax = function(){
    var temp = this.arrPointMarker[0][1];
    for(var i=0 ;i<this.arrPointMarker.length;i++){
        if(parseFloat(this.arrPointMarker[i][1]) > parseFloat(temp)){
            temp = this.arrPointMarker[i][1];
        }
    }
    return temp;
};

OpenStreetMap.prototype.removeMaker = function(markerKeyWord,value){
    for(var i = 0 ; i < this.markers.markers.length ; i++){
        if(this.markers.markers[i][markerKeyWord] == value){
            this.markers.removeMarker(this.markers.markers[i]);
        }
    }
};

OpenStreetMap.prototype.setDefaultVariable = function(){
    if (this.divContainer != null){
        $('#'+this.divContainer).empty();
    }
    this.arrPointMarker = [];
    this.map = null;
    this.zoom = 18;
    this.markers = null;
    this.currentPopup = null;
    this.popupClass = null;
    this.sizeIconMarker = null;
   
};

OpenStreetMap.prototype.gc = function(){
    delete this.arrPointMarker;
    delete this.map;
    delete this.zoom;
    delete this.markers;
    delete this.currentPopup;
    delete this.popupClass;
    delete this.sizeIconMarker;
    delete this.currentZoom;
    delete this.currentPointMapCenter;
    delete this.isSaveMapView;
};

var OpenStreetMapUtil = function() {
    /*KEY WORD OpenLayer.Util write to console web brower*/
    var map = null;
    var zoom = 18;
    var markers = null;
//    var layer = null;
    var cirlceLayer = null;
    var vectorLayer = null;
    var arrPointMarker = [];
    var currentPopup = null;
    var popupClass = null;
    var sizeIconMarker = null;
    // save current map view
    var currentZoom = null;
    var currentPointMapCenter = null;
    var isSaveMapView = false;
    //----------------------
    var divContainer = null;
    return {
        isSaveMapView : function (){
            return isSaveMapView;
        },
        saveCurrentMapView : function(){
            if(map != null){
                isSaveMapView = true;
                currentZoom = map.getZoom();
                currentPointMapCenter = map.getCenter();
            }
        },
        showCurrentMapView : function(){
            if(map != null && currentZoom != null 
                    && currentPointMapCenter != null
                    && isSaveMapView){
                    map.setCenter(currentPointMapCenter,currentZoom);
                    isSaveMapView = false;
                    currentZoom = null;
                    currentPointMapCenter = null;
            }
        },
        initMap : function(container,lon,lat){
            var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
            popupClass = new OpenLayers.Class(OpenLayers.Popup.Anchored, {
                  "autoSize": true,
                  "minSize": new OpenLayers.Size(350, 170),
                  "maxSize": new OpenLayers.Size(450, 220),
                  "keepInMap": true
            });
            sizeIconMarker = new OpenLayers.Size(33,33);
            divContainer = container;
            
            // Layerstyle
            cirlceLayer = new OpenLayers.Layer.Vector('cirlceLayer', {
                styleMap: new OpenLayers.StyleMap({
                  "default": new OpenLayers.Style({
//                    pointRadius: "${radius}",
                    pointRadius: "${getSize}",
                    fillColor: '#bdc1c4',
                    fillOpacity: 0.6,
                    strokeColor: '#ed9576',
                    strokeWidth: 1,
                    strokeOpacity: 0.9
                  },
                  { context: {
                      getSize: function(feature) {
                          return 500 / feature.layer.map.getResolution();
                      }}  
                  })
                })
              });
            var vlayer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            vlayer_style.fillOpacity = 0.6;
            vlayer_style.fillColor = "green";
            vlayer_style.strokeWidth = 6;
            vlayer_style.strokeColor = "blue";
            vlayer_style.strokeOpacity = 1;

            var select_style = OpenLayers.Util.extend({}, vlayer_style);
            select_style.fillOpacity = 0.6;
            select_style.strokeWidth = 10;
            select_style.strokeColor = "black";
            select_style.fillColor = "black";
            vlayer_style.strokeOpacity = 1;
            
            var vStyleMap = new OpenLayers.StyleMap( {
               "default" : vlayer_style,
               "select" : select_style
            });
            
            vectorLayer = new OpenLayers.Layer.Vector("vectorLayer"
                    , {styleMap: vStyleMap});
            
            map = new OpenLayers.Map({
                div: container,
            //  allOverlays: true,
                theme: null,
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: 'm',
                numZoomLevels: 18,
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(
                    -20037508.34, -20037508.34, 20037508.34, 20037508.34
                ),
                controls: [
                    //new OpenLayers.Control.Permalink(),
                    //new OpenLayers.Control.LayerSwitcher(),
                    //new OpenLayers.Control.MousePosition(),
                    //new OpenLayers.Control.Attribution(),
                    new OpenLayers.Control.Navigation(),
                    // new OpenLayers.Control.PanZoom(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.MousePosition({
                        "numDigits": 8,
                        displayProjection: new  OpenLayers.Projection("EPSG:4326"),
                        emptyString:"outside the map" }),
                ],
                layers: [
//                    new OpenLayers.Layer.OSM('OSM OpenStreetMap', null),
                    new OpenLayers.Layer.Google("Google ", { 
                       // type : google.maps.MapTypeId.ROADMAP,
//                      type : google.maps.MapTypeId.TERRAIN,
                        sphericalMercator: true,
                        projection:"EPSG:900913",
                        transparent: true }),
                        vectorLayer,
                        cirlceLayer,
                ],
                center: position,
                zoom : zoom
            });
          
        },
        resetMarkerLayers : function(){
            if(markers.markers.length > 0 && markers != null){
                for(var i = 0 ; i < markers.markers.length ; i++){
                    markers.removeMarker(markers.markers[i]);
                }
            }
//            markers.markers.clearMarkers();
        },
        setMapCenter : function(lon,lat){
            var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
            map.setCenter(position, 17);
        },
        setMapCenterPoints : function(){
            var lngMin = parseFloat(this.getLngMin());
            var lngMax = parseFloat(this.getLngMax());
            var latMin = parseFloat(this.getLatMin());
            var latMax = parseFloat(this.getLatMax());
            var centerPoint = this.caculateCenterPoint(latMin,lngMin,
                    latMax,lngMax,arrPointMarker.length);
            map.setCenter(centerPoint, zoom);
        },
        setMarkerIcon : function(lon,lat,imgUrl,eventHandle){
            
            if(map !== null){
                if(markers === null){
                    markers = new OpenLayers.Layer.Markers( "Markers" );
                    map.addLayer(markers);
                }
//              var size = new OpenLayers.Size(33,33);
                var offset = new OpenLayers.Pixel(-(sizeIconMarker.w), -sizeIconMarker.h);
                var icon = new OpenLayers.Icon(imgUrl,sizeIconMarker,offset);
                
                var lonLatIcon = new OpenLayers.LonLat(lon,lat).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                );
                
                var markerIcon = new OpenLayers.Marker(lonLatIcon,icon);
                markerIcon.events.register( 'click', markers, eventHandle);
                markers.addMarker(markerIcon);
            }
        },
        setMarkerPopup : function(paramMarkerPopup){
            if(map !== null){
                if(markers === null){
                    markers = new OpenLayers.Layer.Markers( "Markers" );
                    map.addLayer(markers);
                }
                
                var lonlatArr = [] || '';
                lonlatArr.push(paramMarkerPopup.lon);
                lonlatArr.push(paramMarkerPopup.lat);

                arrPointMarker.push(lonlatArr);
                
                var lonLatMarker = new OpenLayers.LonLat(paramMarkerPopup.lon, paramMarkerPopup.lat)
                    .transform(new OpenLayers.Projection("EPSG:4326"), 
                    map.getProjectionObject());
                var feature = new OpenLayers.Feature(markers, lonLatMarker); 
//                feature.style = {
//                        strokeColor: "#00FF00",
//                        strokeOpacity: 1,
//                        strokeWidth: 2,
//                        fillColor: "#FF5500",
//                        fillOpacity: 0.5,
//                        pointRadius: 6,
//                        pointerEvents: "visiblePainted"
//                };
                feature.closeBox = paramMarkerPopup.closeBox;
                feature.popupClass = popupClass;
                feature.data.popupContentHTML = paramMarkerPopup.popupContentHTML;
                feature.data.overflow = (paramMarkerPopup.overflow) ? "auto" : "hidden";
                
                
                var offset = new OpenLayers.Pixel(-(sizeIconMarker.w), -sizeIconMarker.h);
                var icon = new OpenLayers.Icon(paramMarkerPopup.imgUrl,sizeIconMarker,offset);
                var lonLatIcon = new OpenLayers.LonLat(paramMarkerPopup.lon,paramMarkerPopup.lat).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                );
                var marker = new OpenLayers.Marker(lonLatIcon, icon.clone());
                marker.feature = feature;
                    
                //marker = this.registerPopupMouseOutOver(feature, marker);
                marker = this.registerPopupMouseClick(feature, marker);
                //marker.events.register("click", feature,paramMarkerPopup.mapEventClickMarkerhandle);
                // add new start
                var idBoiler = "boiler"+ markers.markers.length;
                var nameBoiler = "Marker "+ markers.markers.length;
                marker.id = idBoiler ;
                $('#selectMarkers').append('<option value="' + idBoiler + '">' + nameBoiler + '</option>');
                // add new start
                
                markers.addMarker(marker);
            }
        },
        //add new START
        removeMaker : function(id){
            for(var i = 0 ; i < markers.markers.length ; i++){
                if(markers.markers[i].id == id){
                    markers.removeMarker(markers.markers[i]);
//                    var imgUrl = 'resources/img/boiler_33px.png';
//                    var offset = new OpenLayers.Pixel(-(sizeIconMarker.w), -sizeIconMarker.h);
//                    var icon = new OpenLayers.Icon(imgUrl,sizeIconMarker,offset);
//                    markers.markers[i].icon = icon;
                }
            }
            //============================
            $("#boiler_id").val("");
            $("#selectMarkers option[value='"+id+"']").remove();
        },
        changeIconMarker : function(param){
            var marker = null;
            for(var i = 0 ; i < markers.markers.length ; i++){
                if(markers.markers[i].id == param.id){
                    //keep old marker
                    marker = markers.markers[i];
                    //remove marker from array markers from object map
                    markers.removeMarker(markers.markers[i]);
                }
            }
            if(marker != null){
                //create new icon object
                var offset = new OpenLayers.Pixel(-(sizeIconMarker.w), -sizeIconMarker.h);
                var icon = new OpenLayers.Icon(param.imgUrl,sizeIconMarker,offset);
                //keep old feature object from marker do you want
                //change icon
                var feature = marker.feature;
                if(param.popupContentHTML !== undefined){
                    feature.data.popupContentHTML = param.popupContentHTML;
                    if(feature.popup != null){
                        feature.popup.destroy();
                        feature.popup = null;
                    }
                }
                // set again new icon and feature object of marker do you want change
                var newMarker = new OpenLayers.Marker(marker.lonlat, icon.clone());
                newMarker.feature = feature;
                
//                delete marker.feature;
                newMarker.id = marker.id;
                //newMarker = this.registerPopupMouseOutOver(feature,newMarker);
                
                //register again click handle old marker 
                //to new merker
                newMarker = this.registerPopupMouseClick(feature,newMarker);
                markers.addMarker(newMarker);
            } else {
                alert('please chose marker!');
            }
        },
        registerPopupMouseClick : function(feature,marker){
            var id = marker.id;
            marker.events.register("click", feature,function(evt){
                var selt = this;
                if (this.popup === null) {
                    this.popup = this.createPopup(this.closeBox);
                    //add New start
                    // this.popup.id = marker.id;
                    //add New end
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                for(var i = 0 ; i < markers.markers.length ; i++){
                    var marker = markers.markers[i];
                    if(marker.feature.id == selt.id){
                        console.log(marker.id);
                        break;
                    }
                }
                // start for handle click of icon close popup marker 
               
                if(selt.popup != null){
                    var currentPopupId = selt.popup.id;
                    // FOR CASE 01
//                    $('#' + currentPopupId).click(function(){
//                        $('#' + currentPopupId).css("z-index",999);
//                        for(var i = 0 ; i < map.popups.length ; i++){
//                            if( currentPopupId != map.popups[i].id){
//                                $('#' + map.popups[i].id).css("z-index",998);
//                            }
//                        }
//                    });
                    // FOR CASE 02
                    for(var i = 0 ; i < map.popups.length ; i++){
                        if( currentPopupId != map.popups[i].id){
                            //remove from list popups map object
                            var popupId = map.popups[i].id;
                            map.removePopup(map.popups[i]);
                            for(var i = 0 ; i < markers.markers.length ; i++){
                                var fature = markers.markers[i].feature;
                                if(fature.popup !== null){
                                    if(fature.popup.id === popupId){
                                        fature.popup.destroy();
                                        fature.popup = null;
                                    }
                                }
                            }
                        }
                    }
                    //FOR CLICK ICON CLOSE POPUP MARKER
                    $('#' + currentPopupId).find(".close-icon-popup-map").click(function(){
                        for(var i = 0 ; i < map.popups.length ; i++){
                            if( currentPopupId == map.popups[i].id){
                                //remove from list popups map object
                                map.removePopup(selt.popup);
                                //destroy popup from feature object
                                selt.popup.destroy();
                                selt.popup = null;
                            }
                        }
                    });
                }
                // end for handle click of icon close popup marker 
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            });
            return marker;
        },
        updateInfoMarkersMap : function(){
            if(markers != null){
                if(markers.markers.length > 0){
                    var normalBoiler = 'resources/img/boiler_33px.png';
                    var alertBoiler = 'resources/img/map-04.png';
                    cirlceLayer.removeAllFeatures();
                    for(var i = 0 ; i < markers.markers.length ; i++){
                        var hasAlarm = Boolean(Math.round(Math.random()));
                        var param = {};
                        param["id"] = markers.markers[i].id;
                        if(hasAlarm){
                            param["imgUrl"] = alertBoiler;
                            param["popupContentHTML"] = this.getPopupContentHTMLMap();
                        }else{
                            var param2 = {};
                            param2["lonlat"] = markers.markers[i].lonlat;
                            param2["radius"] = 50;
                            OpenStreetMapUtil.drawCirlceAroundMarker(param2);
                            
                            param["imgUrl"] = alertBoiler;
                            param["popupContentHTML"] = this.getPopupContentHTMLMapV2();
                        }
                        OpenStreetMapUtil.changeIconMarker(param);
                    }
                }
            }
        },
        registerPopupMouseOutOver : function(feature,marker){
            //show popup when mouse over and 
            //destroy when mouse out
            marker.events.register("mouseover", feature, function(evt){
                if (this.popup === null) {
                      this.popup = this.createPopup(this.closeBox);
                      map.addPopup(this.popup);
                      this.popup.show();
                } else {
                      this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            });

            marker.events.register("mouseout", feature, function(evt){
                map.removePopup(this.popup);
                this.popup.destroy();
                this.popup = null;
                OpenLayers.Event.stop(evt);
            });
            return marker;
        },
        drawLinesTwoPoint : function(){
            var arrPoint = [];
            var start_point = new OpenLayers.Geometry.Point(0,10);
            var end_point = new OpenLayers.Geometry.Point(30,0);
            start_point.transform(
                new OpenLayers.Projection("EPSG:4326"),
                new OpenLayers.Projection("EPSG:900913")
            ); 
            end_point.transform(
                new OpenLayers.Projection("EPSG:4326"),
                new OpenLayers.Projection("EPSG:900913")
            ); 
            arrPoint.push(start_point);
            arrPoint.push(end_point);
            
          //create SelectFeatures
            var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
                {displayClass: "selectButton", 
                title: 'Select Ways', 
                onSelect: function(){alert("select");}, 
                onUnselect: function(){alert("deselect");},
                toggle:false,
                clickout:true,
                multiple:false,
                hover:false,
                toggleKey:"ctrlKey",
                multipleKey:"shiftKey",
                geometryTypes: ["OpenLayers.Geometry.LineString"],
                callbacks: {
                    'over': function(feature){ feature.layer.div.style.cursor = "crosshair"; },
                    'out': function(feature){ feature.layer.div.style.cursor = ""; }
                }
            });
            map.addControl(selectControl);
            selectControl.activate();
            
            var line = new OpenLayers.Geometry.LineString(arrPoint);    
            var lineF = new OpenLayers.Feature.Vector(line,null);
            vectorLayer.addFeatures([lineF]);
            map.zoomToMaxExtent(vectorLayer.getDataExtent());
        },
        drawCirlceAroundMarker : function(param){
            if(param.lonlat != undefined && param.radius != undefined){
                var lonLat = param.lonlat;
                
                var feature = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat),
                    {
                      radius : param.radius
                    }
                );
                
                cirlceLayer.addFeatures([feature]);
//                map.zoomToMaxExtent(vectorLayer.getDataExtent());
            }
        },
        
        getPopupContentHTMLMap : function () {
            
            var popupContentHTML = '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-12"><h5><strong>'+ 'asdsa dfsdfdsf fsdfsd fdsf name' +'</strong>';
            popupContentHTML +='<span class="glyphicon glyphicon-remove pull-right close-icon-popup-map closePopupMap"  style="position: relative;right: -8px;top: -21px;"></span>';
            popupContentHTML +='</h5></label></div>';
            
            popupContentHTML += '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-6">Luu Luong Hoi:</label>';
            popupContentHTML +='<div class="col-md-3" style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML +='<p style="text-align: right;">123</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='<div class="col-md-1">';
            popupContentHTML +='<p >ton/hr</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            
            popupContentHTML += '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-6">Tong Hoi Cap Trong Ngay:</label>';
            popupContentHTML +='<div class="col-md-3" style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML +='<p style="text-align: right;">34.543589</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='<div class="col-md-1">';
            popupContentHTML +='<p >ton</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            
            popupContentHTML += '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-6">Ap Suat Hoi:</label>';
            popupContentHTML +='<div class="col-md-3" style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML +='<p style="text-align: right;">3.45345678</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='<div class="col-md-1">';
            popupContentHTML +='<p >Kg/cm²</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            
            popupContentHTML += '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-6">Nhiet Do Hoi:</label>';
            popupContentHTML +='<div class="col-md-3"style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML +='<p style="text-align: right;">345.678345</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='<div class="col-md-1">';
            popupContentHTML +='<p >°C</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            
            popupContentHTML += '<div class="row">';
            popupContentHTML +='<label class="control-label col-md-6">Alarm counts:</label>';
            popupContentHTML +='<div class="col-md-3" style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML +='<p style="text-align: right;">34</p>';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            return popupContentHTML;
        },
        getPopupContentHTMLMapV2 : function () {
            
            var popupContentHTML = '<div class="row" style="padding-left: 20px;padding-right: 0px;">';
//            popupContentHTML +='<img src="' + this.getMapNodeIcon() + '">';
            popupContentHTML +='<label class="control-label col-md-12"><h5><img src="resources/img/node.png"><strong> '+ 'VINA CAFE LONG THANH - BOILER 01' +'</strong>';
            popupContentHTML +='<span class="glyphicon glyphicon-remove pull-right close-icon-popup-map closePopupMap"  style="position: relative;right: -8px;top: -21px;"></span>';
            popupContentHTML +='</h5></label></div>';
            
            popupContentHTML += '<div class="row" style="padding-left: 20px;padding-right: 0px;">';
            popupContentHTML +='<div class="col-md-7">';
            popupContentHTML +='<img src="resources/img/detail boiler-04.png">  '+'boiler 9';
            popupContentHTML +='</div>';
            popupContentHTML +='<div class="col-md-5">';
            popupContentHTML +='<img src="resources/img/map-04.png">  '+'12';
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';
            
            popupContentHTML +='</br>';
            popupContentHTML +='</br>';
            
            popupContentHTML += '<div class="form-horizontal col-md-12" style="padding-left: 0px;padding-right: 0px;">';
            
            // start area 1
            popupContentHTML += '<div class="col-md-3" style="padding-left: 0px;padding-right: 0px;">';
            popupContentHTML += '<div class="col-md-12 popup-sub-area-value" style="padding-left: 0px;padding-right: 0px;background-color: #bdc1c4;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'Steam';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'total';
            popupContentHTML += '</div>';
            popupContentHTML += '<hr style="margin-top: 2px;margin-bottom: 5px;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="color: #1bade1;text-align: center;margin: 0 auto;">';
            popupContentHTML += '123456789.45';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'ton';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            // end area 1
            // start area 2
            popupContentHTML += '<div class="col-md-3" style="padding-left: 5px;padding-right: 0px;">';
            popupContentHTML += '<div class="col-md-12 popup-sub-area-value" style="padding-left: 0px;padding-right: 0px;background-color: #bdc1c4;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'Steam';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'flow';
            popupContentHTML += '</div>';
            popupContentHTML += '<hr style="margin-top: 2px;margin-bottom: 5px;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="color: #1bade1;text-align: center;margin: 0 auto;">';
            popupContentHTML += '123456789.98';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'ton/h';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            // end area 2
            // start area 3
            popupContentHTML += '<div class="col-md-3" style="padding-left: 5px;padding-right: 0px";>';
            popupContentHTML += '<div class="col-md-12 popup-sub-area-value" style="padding-left: 0px;padding-right: 0px;background-color: #bdc1c4;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'Steam';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'pressure';
            popupContentHTML += '</div>';
            popupContentHTML += '<hr style="margin-top: 2px;margin-bottom: 5px;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="color: #1bade1;text-align: center;margin: 0 auto;">';
            popupContentHTML += '123456789.89';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'kg/cm2';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            // end area 3
            // start area 4
            popupContentHTML += '<div class="col-md-3" style="padding-left: 5px;padding-right: 0px;">';
            popupContentHTML += '<div class="col-md-12 popup-sub-area-value" style="padding-left: 0px;padding-right: 0px;background-color: #bdc1c4;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'Steam';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center;margin: 0 auto;">';
            popupContentHTML += 'temperature';
            popupContentHTML += '</div>';
            popupContentHTML += '<hr style="margin-top: 2px;margin-bottom: 5px;">';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="color: #1bade1;text-align: center; margin: 0 auto;">';
            popupContentHTML += '123456789.98';
            popupContentHTML += '</div>';
            popupContentHTML += '<div class="row col-md-12 span12 pagination-centered" style="text-align: center; margin: 0 auto;">';
            popupContentHTML += 'ton';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            popupContentHTML += '</div>';
            // end area 4
            popupContentHTML +='</div>';
            popupContentHTML +='</div>';

            return popupContentHTML;
        },
        //add new END
        caculateCenterPoint : function(_minLat, _minLng, _maxLat, _maxLng, _markerCount){
            // --- set zoom level
            if(_markerCount == 1){
                zoomLevel = 14;
            }
            else{
                var latDistance = Math.abs(_maxLat - _minLat);
                var lngDistance = Math.abs(_maxLng - _minLng);
                var markerDistance = Math.sqrt(Math.pow(latDistance,2) + Math.pow(lngDistance,2));
                 
//              if(markerDistance >= 180){
//                  zoom = 1;
//              }
//              else if(markerDistance >= 150){
//                  zoom = 1.5;
//              }
//              else if(markerDistance >= 125){
//                  zoom = 2;
//              }
//              else if(markerDistance >= 22.5){
//                  zoom = 2.5;
//              }
//              else if(markerDistance >= 11.25){
//                  zoom = 3;
//              }
//              else if(markerDistance >= 5.625){
//                  zoom = 3.5;
//              }
//              else if(markerDistance >= 2.813){
//                  zoom = 4;
//              }
//              else if(markerDistance >= 1.406){
//                  zoom = 5;
//              }
//              else if(markerDistance >= 0.703){
//                  zoom = 6;
//              }
//              else if(markerDistance >= 0.301){
//                  zoom = 6.5;
//              }
//              //------------------------------
//              else if(markerDistance >= 0.150){
//                  zoom = 12;
//              }
//              else if(markerDistance >= 0.075){
//                  zoom = 11;
//              }
//              else if(markerDistance >= 0.037){
//                  zoom = 13;
//              }
//              else if(markerDistance >= 0.01){
//                  zoom = 13.5;
//              }
//              else if(markerDistance >= 0.0025){
//                  zoom = 14;
//              }
//              //--------------------------------
                if(markerDistance >= 180){
                    zoom = 1;
                }
                else if(markerDistance >= 150){
                    zoom = 1.5;
                }
                else if(markerDistance >= 125){
                    zoom = 2;
                }
                else if(markerDistance >= 22.5){
                    zoom = 2.5;
//                    zoom = 1.5;
                }
                else if(markerDistance >= 11.25){
                   // zoom = 3;
                    zoom = 5;
                }
                else if(markerDistance >= 5.625){
                    //zoom = 3.5;
                    zoom = 5.5;
                }
                else if(markerDistance >= 2.813){
                    //zoom = 4;
                    zoom = 6.5;
                }
                else if(markerDistance >= 1.406){
                    //zoom = 5;
                    zoom = 7.5;
                }
                else if(markerDistance >= 0.703){
                    //zoom = 6;
                    zoom = 8.5;
                }
                else if(markerDistance >= 0.301){
                    //zoom = 6.5;
                    zoom = 10;
                }
                //------------------------------
                else if(markerDistance >= 0.150){
                    zoom = 12;
                }
                else if(markerDistance >= 0.075){
                    zoom = 11;
                }
                else if(markerDistance >= 0.037){
                    zoom = 13;
                }
                else if(markerDistance >= 0.015){
                    zoom = 13.5;
                }
                else if(markerDistance >= 0.0025){
                    zoom = 14;
                }
                //--------------------------------
            }
             
            // --- calculate center point location
            var centerLat = 0;
            var difLatFlg = ((_minLat*_maxLat) > 0 ? 1 : -1);
            if(difLatFlg > 0){
                centerLat = (_minLat + _maxLat)/2;
            }
            else{
                centerLat = (Math.abs(_minLat) + Math.abs(_maxLat))/2 + _minLat;
            }
             
            var centerLng = 0;
            var difLngFlg = (_minLng*_maxLng > 0 ? 1 : -1);
            if(difLngFlg > 0){
                centerLng = (_minLng + _maxLng)/2;
            }
            else{
                centerLng = (Math.abs(_minLng) + Math.abs(_maxLng))/2 + _minLng;
            }
             
            var centerPoint = new OpenLayers.LonLat(centerLng, centerLat)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    map.getProjectionObject() // to Spherical Mercator Projection
                );
            return centerPoint;
        },
        getLngMin : function(){
            var temp = arrPointMarker[0][0];
            for(var i=0 ;i<arrPointMarker.length;i++){
                if(parseFloat(arrPointMarker[i][0]) < parseFloat(temp)){
                    temp = arrPointMarker[i][0];
                }
            }
            return temp;
        },
        getLngMax : function(){
            var temp = arrPointMarker[0][0];
            for(var i=0 ;i<arrPointMarker.length;i++){
                if(parseFloat(arrPointMarker[i][0]) > parseFloat(temp)){
                    temp = arrPointMarker[i][0];
                }
            }
            return temp;
        },
        getLatMin : function(){
            var temp = arrPointMarker[0][1];
            for(var i=0 ;i<arrPointMarker.length;i++){
                if(parseFloat(arrPointMarker[i][1]) < parseFloat(temp)){
                    temp = arrPointMarker[i][1];
                }
            }
            return temp;
        },
        getLatMax : function(){
            var temp = arrPointMarker[0][1];
            for(var i=0 ;i<arrPointMarker.length;i++){
                if(parseFloat(arrPointMarker[i][1]) > parseFloat(temp)){
                    temp = arrPointMarker[i][1];
                }
            }
            return temp;
        },
        setDefaultVariable : function(){
            if (divContainer != null){
                $('#'+divContainer).empty();
            }
            arrPointMarker = [];
            map = null;
            zoom = 18;
            markers = null;
            currentPopup = null;
            popupClass = null;
            sizeIconMarker = null;
        },
        gc : function(){
            delete cirlceLayer;
            delete vectorLayer;
            delete divContainer;
            delete arrPointMarker;
            delete map;
            delete zoom;
            delete markers;
            delete currentPopup;
            delete popupClass;
            delete sizeIconMarker;
            delete currentZoom;
            delete currentPointMapCenter;
            delete isSaveMapView;
        }
    };
}();


var ViewMap = Backbone.View.extend({
//  el : '#container-body',
//  templateMap : _.template($('#map-input-template').html()),

    initialize : function(options) {
        console.log("View initialize");
        this.name = PAGE_MAP_VIEW;
        /*init MAP*/
        this.mapViewer = undefined;
//        this.setMapDefault();
        this.tpl = options.tpl;
        this.locationData = options.locationData;
        
    },

    render : function() {
//      var that = this;
//      console.log("View render");
//      that.$el.html(that.templateMap());
//      return false;
        
        var renderHtml = _.template(this.tpl, {
            locationData : this.locationData
        });
        return this.$el.html(renderHtml);
    },

    events : {
        "click button[id='btn-add']" : "AddLocation",
        "click button[id='btn-Cancel']" : "reload",
        "click button[id='btn-delete']" : "deleteLocation",
        "click button[id='btn-change-icon']" : "changeIconMarker",
        "click a[name='btnAddLocation']" : "addLocationLink",
        "click button[id='btn-reset-marker']" : "resetMarkerLayer",
        "click button[id='btn-draw-line']" : "drawLines",
    },
    drawLines : function(){
        OpenStreetMapUtil.drawLinesTwoPoint();
        return false;
    },
    resetMarkerLayer : function(){
        $('#selectMarkers option[value!=""]').remove();
        OpenStreetMapUtil.resetMarkerLayers();
        var lat = 10.7253272;
        var lon = 106.6175712;
        OpenStreetMapUtil.setMapCenter(lon,lat);
        return false;
    },
    addLocationLink : function(e){
        var locationData = $(e.currentTarget).attr("locationData");
        var lonlat = locationData.split(",");
        
        
        var lon = lonlat[1];
        var lat = lonlat[0];

        popupContentHTML = Util.getPopupContentHTMLMapV2();
        var markerIcon = IconUtil.getMapMarkerAlartIcon();
        var mapEventClickMarkerhandle = function (evt){
//            alert('sdfsd');
            OpenLayers.Event.stop(evt);
        };
        
        var paramMarkerPopup = {};
//        paramMarkerPopup['boilerId'] = boiler.boilerId;
        paramMarkerPopup['lon'] = lon;
        paramMarkerPopup['lat'] = lat;
        paramMarkerPopup['popupContentHTML'] = popupContentHTML;
        paramMarkerPopup['imgUrl'] = markerIcon;
        paramMarkerPopup['mapEventClickMarkerhandle'] = mapEventClickMarkerhandle;
        paramMarkerPopup['closeBox'] = false;
        paramMarkerPopup['overflow'] = false;
//        OpenStreetMapUtil.setMarkerPopup(paramMarkerPopup);
//        OpenStreetMapUtil.setMapCenterPoints();
        // add new start
        var idBoiler = Util.generateUniqueId();
        var nameBoiler = "Marker "+ idBoiler;
        paramMarkerPopup['deviceId']= idBoiler ;
        $('#selectMarkers').append('<option value="' + idBoiler + '">' + nameBoiler + '</option>');
        // add new start
        this.mapViewer.setMarkerPopup(paramMarkerPopup);
       
        this.mapViewer.setMapCenterPoints();
        return false;
    },
    changeIconMarker : function(){
        var id = $("#boiler_id").val();
        if(id != "" ){
            var imgUrl = $("#selectIcons option:selected").val();
            var param = {};
            param["deviceId"] = id;
            param["imgUrl"] = imgUrl;
            param["popupContentHTML"] = Util.getPopupContentHTMLMap();
//            OpenStreetMapUtil.changeIconMarker(param);
            this.mapViewer.changeIconMarker(param);
        }
        return false;
    },
    deleteLocation : function(){
        var id = $("#boiler_id").val();
        if(id != "" ){
            //keyWordMarker
            //value
            var keyWordMarker = "deviceId";
            this.mapViewer.removeMaker(keyWordMarker,id);
            $("#boiler_id").val("");
            $("#selectMarkers option[value='"+id+"']").remove();
        }
        return false;
    },
    setMapDefault : function(){
//      $('#map-canvas').empty();
        var lat = 10.7253272;
        var lon = 106.6175712;
        this.mapViewer = new OpenStreetMap();
        this.mapViewer.initMap("map-canvas",lon,lat);
        this.mapViewer.clearContainer();
        this.mapViewer.setMapCenter(lon,lat);
//        OpenStreetMapUtil.setDefaultVariable();
//        OpenStreetMapUtil.initMap("map-canvas",lon,lat);
//        OpenStreetMapUtil.setMapCenter(lon,lat);
        
        return false;
    },
    
    
    AddLocation : function() {
        
        var lon = $('#lon').val();
        var lat = $('#lat').val();

        popupContentHTML = Util.getPopupContentHTMLMapV2();
        var markerIcon = IconUtil.getMapMarkerAlartIcon();
        var mapEventClickMarkerhandle = function (evt){
//            alert('sdfsd');
            OpenLayers.Event.stop(evt);
        };

        
        var paramMarkerPopup = {};
//        paramMarkerPopup['boilerId'] = boiler.boilerId;
        paramMarkerPopup['lon'] = lon;
        paramMarkerPopup['lat'] = lat;
        paramMarkerPopup['popupContentHTML'] = popupContentHTML;
        paramMarkerPopup['imgUrl'] = markerIcon;
        paramMarkerPopup['mapEventClickMarkerhandle'] = mapEventClickMarkerhandle;
        paramMarkerPopup['closeBox'] = true;
        paramMarkerPopup['overflow'] = false;
        
//        OpenStreetMapUtil.setMarkerPopup(paramMarkerPopup);
//        OpenStreetMapUtil.setMapCenterPoints();
        // add new start
        var idBoiler = Util.generateUniqueId();
        var nameBoiler = "Marker "+ idBoiler;
        paramMarkerPopup['deviceId']= idBoiler ;
        $('#selectMarkers').append('<option value="' + idBoiler + '">' + nameBoiler + '</option>');
        // add new start
        this.mapViewer.setMarkerPopup(paramMarkerPopup);
        this.mapViewer.setMapCenterPoints();
    },
    reload : function() {
        $('#selectMarkers option[value!=""]').remove();
        this.setMapDefault();
    },
    close : function() {
        delete this.tpl;
        this.unbind();
        this.remove();
        delete this.$el;
        delete this.el;
//        OpenStreetMapUtil.gc();
//        delete OpenStreetMapUtil;
    }
});


//$("<img/>").attr("src", item.media.m).appendTo("#images");





